
<style>

    #extr-page {
        color: #f2f1ed;
        background: url(styles/img/texture-dark.png);
        background-size: 29.75em;
        box-shadow: 0 2px 0 rgba(17,17,18,0.2);
        overflow: hidden;
        display: table;
        position: relative;
        z-index: 2;
        top: 0;
        width: 100%;
        min-height: 100%;
        height: 100%;

    }
    #extr-page:before{
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        min-height: 100%;
        height: 100%;
        background: rgba(24,25,26,0.7);
        font-size: 3em;
    }

    #content{
        margin: 0 auto;
        padding:30px 14px;
        padding-top:11%!important;

    }
    .fixed-header #header{
        position:relative;
    }
    body{
        /* background: transparent; */
        background: #111112;
    }
    #extr-page .load-screen {
        background: #111112;
    }
    .load-screen {
        /* display: none; */
        position: fixed;
        z-index: 19;
        width: 100%;
        height: 100%;
        background: #f2f1ed;
    }
    .crr h1{
        font-size: 5em;
        font-family: BaronNeue,"Helvetica Neue",Helvetica,Arial;
        font-weight: bold;
        line-height: 1.1em;
    }
    .crr:before{
        width: 100px;
        height: 100px;
        margin: 0 auto 1.6em auto;
        content: url(styles/img/icon.svg);
        display: block;
    }
    .crr h1:after {
        content: "";
        display: block;
        width: 1.6em;
        height: 0.125em;
        margin: 0.6em auto 0.7em auto;
        background: #988345;
        background: #f2f1ed;
    }
    .top-header {
        position: absolute;
        z-index: 3;
        width: 100%;
    }
    .top-header #logo{
        margin: 15px;
    }
    
    .crr h4{
        position: relative;
        letter-spacing: 0.15em;
        font-size: 1.5em;
        color: #f2f1ed;
        font-weight:bold;
        text-transform: uppercase;
    }
    .crr h4:before{
        content: "+";
        position: absolute;
        left: 50%;
        margin: 0 0 0 -0.2em;
    }
    .designer{
        margin: 0 1.5em;
    }
    .developer{
        margin: 0 2.0em;
    }
    @media screen and (min-width: 320px) {
        .crr h1 {
            font-size: 2em
        }
        .crr:before{
            width: 50px;
            height: 50px;
            /* margin: 0 auto 1.6em auto;
            content: url(styles/img/icon.svg);
            display: block; */
        }
        #content{
            padding-top: 44%!important;
        }
        .crr h4 {
            font-size: 1.0em
        }
        
    }
    @media screen and (min-width: 320px) and (max-width: 600px) {
        .top-header #logo{
            margin: 6px;
            width: 90px;
        }
    }
    @media screen and (min-width: 641px) {
        .crr h1 {
            font-size: 5em
        }
        .crr:before{
            width: 100px;
            height: 100px;
        }
        .crr h4 {
            font-size: 2.25em
        }
        .btn{
            font-size:17px;
        }
    }
    @media screen and (min-width: 1030px) {
        .crr h1 {
            font-size: 4em
        }
        .crr:before{
            width: 120px;
            height: 120px;
        }
        .crr h4 {
            font-size: 1.5em
        }
        #content{
            padding-top: 20%!important;
        }
    }
    @media screen and (min-width: 1500px) {
        #content{
            padding-top: 11%!important;
        }
    }
</style>
<header class="top-header">

  <div id="logo-group">
      <span id="logo"> <img src="styles/img/logo.png" alt="江苏万企汇云仓" style="width:100%"></span>
  </div>
  <!--<span id="extr-page-header-space"> <span class="hidden-mobile hiddex-xs">物联网时代，需要账号?</span> <a href="register.html" class="btn btn-danger">创建</a> </span>-->

</header>


  <div id="content" class="container">
      <div class="row">
        <div class="text-center crr">
            <h1 class="" style="color:#988345;">油罐远程数据监测系统</h1>
            <h4 class="text-center"><span class="designer">Projects</span><span class="developer">Devices</span></h4>
        </div>
        <div class="text-center" style="margin-top:3em; ">
            <button class="btn btn-warning crr-btn" style="letter-spacing:0.15em;" ng-click="loginPost()">
                <!-- 点击进入 -->{{credentials.id}}
                <span class="glyphicon glyphicon-chevron-right"></span>
            </button><br><br>
            <font color="red">{{warning}}</font>
        </div>
      </div>
  </div>

<div style="height:6px; background-color:#988345; position: absolute; z-index: 0; bottom: 0; left: 0; width: 100%;"></div>